<template>
  <div id="investmentInfo">
    <!-- 标题 -->
    <div class="investmentInfoTitle">
      <!-- 楼层选择 -->
      <div class="select-floor">
        <el-popover placement="bottom" trigger="click">
          <div>
            <el-button size="mini" @click="showZS(5)">五层</el-button>
            <el-button size="mini" @click="showZS(6)">六层</el-button>
          </div>
          <div slot="reference" class="lcc">
            <span>楼层选择:</span>
            <span class="lc"></span>
          </div>
        </el-popover>
      </div>
    </div>
    <!-- 内容 -->
    <div class="investmentInfoContent">
      <el-row>
        <!-- 左侧树结构 -->
        <el-col :span="12">
          <el-row>
            <!-- 树结构图形 -->
            <el-col :span="8" style="text-align: right">
              <img src="../../../../../static/images/operate/tree.png"/>
            </el-col>
            <!-- 各个类型占比 -->
            <el-col :span="16">
              <div class="rightPercent">
                <div class="setInlineBlock fLevel" style="color: #12e7e8;cursor:pointer" @click="showZs">
                  招商中
                </div>
                <div class="setInlineBlock total">
                  <span style="color: #12e7e8"
                  ><i class="el-icon-caret-top"></i> {{ rent }}</span
                  >
                </div>
              </div>
              <div class="rightPercent">
                <div class="setInlineBlock sLevel" style="color: #4da3ff;cursor:pointer" @click="showZs">
                  洽谈中
                </div>
                <div class="setInlineBlock total">
                  <span style="color: #4da3ff"
                  ><i class="el-icon-caret-top"></i>{{ negotiation }}</span
                  >
                </div>
              </div>
              <div class="rightPercent">
                <div class="setInlineBlock tLevel" style="color: #24e824;cursor:pointer" @click="showZs">
                  已入驻
                </div>
                <div class="setInlineBlock total">
                  <span style="color: #24e824"
                  ><i class="el-icon-caret-top"></i>{{ checkedIn }}</span
                  >
                </div>
              </div>
            </el-col>
          </el-row>
        </el-col>
        <!-- 右侧百分比 -->
        <el-col :span="12">
          <div class="percentBackgrond">
            <div class="percentText">
              <div style="font-size: 40px; color: #1afcff" v-cloak>
                {{
                  checkedIn == 0 || total == 0
                    ? 0
                    : ((checkedIn * 100) / total).toFixed(0)
                }}%
              </div>
              <div>入驻率</div>
            </div>
          </div>
          <div class="showPer">
            <span style="color: #aaddff; font-size: 20px">总数：</span
            ><span style="font-size: 25px">{{ total }}</span>
          </div>
        </el-col>
      </el-row>
      <el-tabs v-model="activeName" style="width: 90%; margin-top: 30px">
        <el-tab-pane
          v-for="(item, index) in paneData"
          :key="index"
          :label="item.lease_enterprise_type"
          :name="item.lease_enterprise_type"
        >
          <div class="numTotal">
            <div class="numTitle">总数</div>
            <div class="number">{{ item.total }}</div>
          </div>
          <el-row>
            <el-col :span="8">
              <div class="typeTotal">
                <div class="count">{{ item.checkedIn }}</div>
                <div class="title" style="color: #15df7a" @click="showZs">已入驻</div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="typeTotal">
                <div class="count">{{ item.negotiation  }}</div>
                <div class="title" style="color: #00d7e9">洽谈中</div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="typeTotal">
                <div class="count">{{ item.rent }}</div>
                <div class="title" style="color: #f3dd64">招商中</div>
              </div>
            </el-col>
          </el-row>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script>
import {
  querLeaseStatistics,
  querLeaseTypeStatistics,
} from "../../../../api/index.js";

export default {
  data () {
    return {
      activeName: "中小型企业",
      checkedIn: "-",
      rent: "-",
      total: "-",
      negotiation: "-",
      paneData: [],
    };
  },
  mounted () {
    let _this = this;
    querLeaseStatistics().then(function (res) {
      let data = res;
      data = data.data[0];
      _this.checkedIn = data.checkedIn;
      _this.rent = data.rent;
      _this.total = data.total;
      _this.negotiation = data.negotiation;
    });
    querLeaseTypeStatistics().then((res) => {
      this.paneData = res.data;
    });
  },
  methods: {
    // 选择楼层飞过去
    showZS(num) {
      window.Sgworld &&
      window.Sgworld.flyTo(
        16.826513290405273,
        -125.1737289428711,
        70.27117919921875,
        0,
        -42.4249267578125,
        93.60037994384766,
        10401.529296875,
        null,
        2
      );
      window.Sgworld.execute(
        "grapi",
        "business",
        { visibility: true, floor: num },
        null
      );
      var temnum = num+" 楼";
      window.creatLabel(temnum);
    },
    showZs () {
      window.Sgworld.execute("grapi", "business", {visibility: true, floor: 6}, null);
    },
  },
};
</script>
<style scoped>
[v-cloak] {
  display: none;
}
/* 楼层选择 */
.select-floor {
  position: absolute;
  right: -100px;
}
.lcc {
  height: 64px;
  line-height: 64px;
  font-size: 30px;
}
.lc {
  width: 64px;
  height: 64px;
  line-height: 64px;
  display: inline-block;
  background: url("../../../../../static/images/index/lc.png");
  position: absolute;
  cursor: pointer;
}
.lc:hover{
  background: url("../../../../../static/images/index/lc-s.png");
}
/* 设置标题的背景图片 */
.investmentInfoTitle {
  width: 732px;
  height: 64px;
  background: url("../../../../../static/images/operate/investmentInfo.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin-bottom: 25px;
  position: relative;
}

/* 设置内容区域 */
.investmentInfoContent {
  margin-top: 30px;
  text-align: center;
}

/* 设置右侧百分比的图片 */
.percentBackgrond {
  width: 207px;
  height: 159px;
  background: url("../../../../../static/images/operate/percent.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin: 0 auto;
  position: relative;
}
.percentText {
  position: absolute;
  left: 65px;
  top: 25px;
}
/* 设置左侧统计的样式 */
.rightPercent {
  text-align: right;
}
.rightPercent div:first-child {
  border-bottom: 1px dotted lightgray;
  padding-right: 40px;
  box-sizing: border-box;
}
.rightPercent div {
  font-size: 25px;
  height: 40px;
  line-height: 40px;
  margin-top: 10px;
}
.fLevel {
  width: 145px;
}
.sLevel {
  width: 125px;
}
.tLevel {
  width: 130px;
}
.setInlineBlock {
  display: inline-block;
}
.total {
  width: 100px;
  text-align: left;
}
.total span:first-child {
  display: inline-block;
  width: 60px;
}

/* 右侧百分比的样式 */
.showPer {
  text-align: center;
  height: 40px;
  line-height: 40px;
}

/* 底部tabs */
.numTotal {
  width: 268px;
  height: 92px;
  background: url("../../../../../static/images/operate/numTotal.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin: 40px auto;
  position: relative;
}
.typeTotal {
  width: 190px;
  height: 98px;
  background: url("../../../../../static/images/operate/typeTotal.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin: 0 auto;
  position: relative;
}
.numTitle,
.number,
.count,
.title {
  position: absolute;
  width: 100px;
  text-align: center;
}
.count {
  font-size: 35px;
  top: 10px;
  left: calc(50% - 50px);
}
.title {
  font-size: 27px;
  bottom: 0;
  left: calc(50% - 50px);
}

.numTitle {
  font-size: 21px;
  top: 0;
  left: 50%;
}
.number {
  font-size: 32px;
  color: #f2e511;
  top: 40px;
  left: 50%;
}
</style>
